<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3D Cubes</title>
    <script src="js/vue.js"></script>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        /* 通用样式 */
       .cube-container {
            width: 100px;
            height: 100px;
            perspective: 500px;
            margin: 0 20px; /* 调整左右间距 */
            display: inline-block; /* 使立方体横向排列 */
        }

       .cube {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            animation: rotate 5s infinite linear;
        }

       .face {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0.8;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            border-radius: 25px;
        }

       .front {
            background-color: #FF5733;
            transform: translateZ(50px);
        }

       .back {
            background-color: #33FF57;
            transform: rotateY(180deg) translateZ(50px);
        }

       .right {
            background-color: #3357FF;
            transform: rotateY(90deg) translateZ(50px);
        }

       .left {
            background-color: #FF33E7;
            transform: rotateY(-90deg) translateZ(50px);
        }

       .top {
            background-color: #FFE733;
            transform: rotateX(90deg) translateZ(50px);
        }

       .bottom {
            background-color: #57FF33;
            transform: rotateX(-90deg) translateZ(50px);
        }

        /* 横向滚动动画 */
       .animate-horizontal {
            animation-name: horizontal-roll;
        }

        @keyframes horizontal-roll {
            from {
                transform: rotateY(0deg);
            }
            to {
                transform: rotateY(360deg);
            }
        }

        /* 纵向滚动动画 */
       .animate-vertical {
            animation-name: vertical-roll;
        }

        @keyframes vertical-roll {
            from {
                transform: rotateX(0deg);
            }
            to {
                transform: rotateX(360deg);
            }
        }

        /* 纵横滚动动画 */
       .animate-both {
            animation-name: both-roll;
        }

        @keyframes both-roll {
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
    </style>
</head>

<body>
    <div id='app'>
        <div class="cube-container">
            <div class="cube animate-horizontal">
                <div class="face front">横向滚动</div>
                <div class="face back">4</div>
                <div class="face right">3</div>
                <div class="face left">1</div>
                <div class="face top">2</div>
                <div class="face bottom">5</div>
            </div>
        </div>
        <div class="cube-container">
            <div class="cube animate-vertical">
                <div class="face front">纵向滚动</div>
                <div class="face back">4</div>
                <div class="face right">3</div>
                <div class="face left">1</div>
                <div class="face top">2</div>
                <div class="face bottom">5</div>
            </div>
        </div>
        <div class="cube-container">
            <div class="cube animate-both">
                <div class="face front">纵横滚动</div>
                <div class="face back">4</div>
                <div class="face right">3</div>
                <div class="face left">1</div>
                <div class="face top">2</div>
                <div class="face bottom">5</div>
            </div>
        </div>
    </div>
    <script>
        Vue.createApp({
            data() {
                return {}
            }
        }).mount('#app')
    </script>
</body>

</html>